<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="/css/index.css"/>
	<link rel="stylesheet" href="/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/layui/css/layui.css" >
	<link rel="stylesheet" href="/cropper/cropper.css" >
	<title th:text="${setting.siteName}+'-个人中心'">易书网</title>
</head>
<style>
	.help-main {
		padding: 0;
	}
	select{
		padding: 3px 10px;
	}
</style>
<body >


<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: header"></div>

<div class="help-wrap">
	<div class="container clearfix">
		<div class="bread">当前位置：
			<a href="index.html">首页</a> >
			<a href="member.html">个人中心</a> >
			<a href="bought.html">发布书籍</a>
		</div>

		<div  th:replace="mall/common/mall_common :: left"></div>

		<div class="help-r fr">
			<div class="help-item-title">发布书籍</div>
			<div class="help-main">
				<form action="" method="post" id="Form" >
					<input type="hidden" name="id" th:value="${book!=null?book.id:''}">
					<div class="product-edit-item clearfix" th:each="classify:${classifyNode}">
						<div class="product-edit-item-l fl">
							<div class="fr" th:utext="'<i class=middle>*</i>图书分类'+${classify.classifyName}+':'"><i class="middle">*</i>图书分类1：</div>
						</div>
						<div class="product-edit-item-r fl">
							<select name=""  >
								<option value="" th:text="'图书所属'+${classify.classifyName}">图书所属学校</option>
								<option value="0"  th:each="node:${classify.classifyList}" th:text="${node.classifyName}" th:value="${node.id}" >分类11</option>
							</select>
						</div>
					</div>

					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书名称：</div>
						</div>
						<div class="product-edit-item-r fl">
							<input type="text"  th:value="${book!=null?book.bookName:''}" name="bookName" style="width: 410px">
							<p >图书标题名称长度至少3个字符，最长50个汉字</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书价格：</div>
						</div>
						<div class="product-edit-item-r fl">
							<input type="text" name="price" style="width: 60px" th:value="${book!=null?book.price:''}"><em class="add-on"><i class="icon-renminbi" ></i></em>
							--打折价:
							<input type="checkbox" th:attr="checked=${book != null?(book.isdiscount==2?true:false):false}"  name="isdiscount" lay-skin="switch" lay-filter="switchTest" id="switchTest" lay-text="ON|OFF">
							<input id="discount" type="text"  th:value="${book!=null?book.discount:''}" name="discount" style="width: 60px" disabled ><em class="add-on"><i class="icon-renminbi"></i></em>
							<p >价格必须是0.01~9999999之间的数字，且不能高于市场价。<br>此价格为图书实际销售价格，如果图书存在规格，该价格显示最低价格。</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书描述：</div>
						</div>
						<div class="product-edit-item-r fl">
							<textarea name="bookDescribe"  cols="30" rows="10" th:text="${book!=null?book.bookDescribe:''}"></textarea>
							<p >请如实描述你所发布书籍的详细情况，以方便其他会员购买！</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>上传封面：</div>
						</div>
						<div class="product-edit-item-r fl">
							<div id="preview">
                                <input type="hidden" name="imageUrl" th:value="${book!=null?book.imageUrl:''}">
								<img width="228" id="showImg" height="128"  src="/images/siji.jpg" th:src="${book!=null?book.imageUrl:'/images/siji.jpg'}">
							</div>
							<button type="button"
									class="layui-btn layui-btn-sm layui-btn-normal"
									id="formCoverUpload">选择图片</button>
							<p >请上传图书封面，尽量保持图片清晰</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc" style="border: none;border-top:1px solid #E6E6E6">
						</div>
						<div class="product-edit-item-r fl" style="border: none;border-top:1px solid #E6E6E6">
						</div>
					</div>
					<div class="upload"><label><input type="button" id="editBook" value="点击发布"></label></div>
				</form>





			</div>
		</div>
	</div>
</div>





<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: footer"></div>


<script src="/layui/layui.js" ></script>
<script src="/js/jquery-3.4.1.js" th:src="@{/js/jquery-3.4.1.js}"></script>
<script src="/cropper/cropper.js" th:src="@{/cropper/cropper.js}"></script>
<script th:inline="javascript">
	$("#dataList").click(function () {
		var data = $("#bookName").val();
		console.log(data)
		location.href="/mall/list.html?bookName="+data;
		return false;
	})

	layui.config({
		base: '/cropper/layui_modules/' //你存放新模块的目录，注意，不是layui的模块目录
	}).use('cropperUpload'); //加载入口


    $().ready(function () {
        var pac = [[${book!=null?book.pac:''}]]
        if(pac!=null){
            for(var i =0; i<pac.length;i++){
                $("select option").each(function(){
                    if($(this).text()==pac[i].childName){
                       $(this).attr("selected",true);
                    }
                });
            }
        }
    })

	let formCoverUpload;
	let coverupload;
	layui.use([ 'layer', 'form', 'element', 'laydate', 'cropperUpload', 'layedit', 'laypage', 'table' ],function () {
		let layer = layui.layer,
				form = layui.form;
		let element = layui.element;
		let laydate = layui.laydate;
		let cropperUpload = layui.cropperUpload;
		let layedit = layui.layedit;
		let laypage = layui.laypage;

		let table = layui.table;
		//表单封面裁剪图片组件
		formCoverUpload = cropperUpload.init({
			select : "#formCoverUpload",
			aspectRatio : 2 / 3,
			imgWidth : 300,
			imgHeight : 500,
			formDataId : "#blogForm",
			success : function(base64Img,blog,that) { //base64Img  base64格式图片    blog  二进制图
				$("#showImg").attr("src", base64Img)
			}
		})

		//监听指定开关
		$('#switchTest').click( function(){

			this.checked ? $("#discount").attr("disabled",false) : $("#discount").attr("disabled",true)

		})



		$("#editBook").click(function () {

			var select = [] ;
			$("select option:selected").each(function(){
				if($(this).val()==''){
					return;
				}
				if($(this).val()){
					select.push($(this).val());
				}
			});
			console.log(select)

			//获取表单所有数据
			var formData = {classifyId:select.join(","),isdiscount:""};
			var t = $('#Form').serializeArray();
			$.each(t, function() {
				formData[this.name] = this.value;
			});
			console.log(JSON.stringify(formData));
			console.log(formData);
			if(formData.classifyId==""){
				layer.msg("分类必须选一项")
				return false;
			}
			if(formData.isdiscount==="on"){
				if(formData.discount==""){
					layer.msg("折扣价不能为空")
					return false;
				}
				formData.isdiscount=2
			}
			if(formData.price==""){
				layer.msg("价格不能为空")
				return false;
			}
			if(formData.bookName==""){
				layer.msg("图书名不能为空")
				return false;
			}
			if(formData.bookDescribe==""){
				layer.msg("图书描述不能为空")
				return false;
			}
			if ($("#showImg").attr("src").toString().endsWith("siji.jpg")) {
				layer.msg('不能使用默认图片做为封面');
				return false;
			}

			formCoverUpload.ajaxPost("/books/user/editBooks", function(res) {
				layer.msg(res.content)
				if(res.success){
				    if(res.content!="更新成功"){
                        $('#Form')[0].reset();
                        $("#showImg").attr("src","/images/siji.jpg");
                    }
				}
			},formData)

			return false;
		})


	})

</script>

</body>
</html>